<template>
  <div class="body">
    <div class="canvas"
         :style="{width:canvas.base.width+'px',height:canvas.base.height+'px',background:canvas.base.background,backgroundImage:'url(\''+canvas.base.backgroundImage+'\')',position: 'relative'}">
      <component :is="item.name" :config="item.config" :data="data" :uuid="item.uuid" v-for="(item,i) in canvas.data"
                 :style="{position:'absolute',top:item.top+'px',left:item.left+'px',width:item.width+'px',height: item.height+'px'}"></component>
    </div>
    <div id="excel" style="visibility:hidden"></div>
  </div>
</template>

<script>

import {LuckySheet} from '../entity/LuckySheet';
import {Canvas} from '../entity/Canvas';

export default {
  name: 'Home',
  components: {},

  data() {
    var that = this;

    return {
      canvas: {
        base: {
          width: 0,
          height: 0,
          background: '#fff',
          backgroundImage: '',
          name: ''
        }
        ,
        data: []
      },
      data: 0,// 数据变动计数器
      options: {
        showinfobar: false,
        lang: "zh",
        container: 'excel', //luckysheet为容器id
        data: [
          {
            "name": "Cell", //工作表名称
            "color": "", //工作表颜色
            "index": 0, //工作表索引
            "status": 1, //激活状态
            "order": 0, //工作表的下标
            "hide": 0,//是否隐藏
            "row": 36, //行数
            "column": 18, //列数
            "defaultRowHeight": 19, //自定义行高
            "defaultColWidth": 73, //自定义列宽
            "celldata": [{
              "r": 0,
              "c": 0,
              "v": {
                ct: {fa: "General", t: "g"},
                m: "value1",
                v: "value1"
              }
            }], //初始化使用的单元格数据
            "config": {
              "merge": {}, //合并单元格
              "rowlen": {}, //表格行高
              "columnlen": {}, //表格列宽
              "rowhidden": {}, //隐藏行
              "colhidden": {}, //隐藏列
              "borderInfo": {}, //边框
              "authority": {}, //工作表保护

            },
            "scrollLeft": 0, //左右滚动条位置
            "scrollTop": 315, //上下滚动条位置
            "luckysheet_select_save": [], //选中的区域
            "calcChain": [],//公式链
            "isPivotTable": false,//是否数据透视表
            "pivotTable": {},//数据透视表设置
            "filter_select": {},//筛选范围
            "filter": null,//筛选配置
            "luckysheet_alternateformat_save": [], //交替颜色
            "luckysheet_alternateformat_save_modelCustom": [], //自定义交替颜色
            "luckysheet_conditionformat_save": {},//条件格式
            "frozen": {}, //冻结行列配置
            "chart": [], //图表配置
            "zoomRatio": 1, // 缩放比例
            "image": [], //图片
            "showGridLines": 1, //是否显示网格线
            "dataVerification": {} //数据验证配置
          },
          {
            "name": "Sheet2",
            "color": "",
            "index": 1,
            "status": 0,
            "order": 1,
            "celldata": [],
            "config": {}
          },
          {
            "name": "Sheet3",
            "color": "",
            "index": 2,
            "status": 0,
            "order": 2,
            "celldata": [],
            "config": {},
          }
        ],
        hook: {
          updated: function () {
            // 数据变化时候驱动
            that.data++;
          },
          workbookCreateAfter: function () {
            // 文档结束后渲染画布
            let canvas = new Canvas();
            that.canvas = canvas.getCanvasInfo()
          }
        }
      },
      luckysheet: null,
    }
  },

  methods: {},
  mounted() {
    // 初始化画布
    // 获取数据
    var that = this;
    if (window.localStorage.getItem('excel') != undefined) {
      this.options = JSON.parse(window.localStorage.getItem('excel')).data;
      // 添加hook函数
      this.options.hook = {
        updated: () => {
          // 数据变化时候驱动
          this.data++;
        },
        workbookCreateAfter: function () {
          // 文档结束后渲染画布
          let canvas = new Canvas();
          that.canvas = canvas.getCanvasInfo()
        }
      }
    }
    new LuckySheet("excel", this.options);
  },
  watch: {}
}
</script>
<style lang="scss" scoped>
.canvas {
  position: absolute;
}
.body{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
